<template>
<div>
      <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <div class="logo" />
    </a-layout-header>
    <a-layout-content style="padding: 0 50px;height:400px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Validate</a-breadcrumb-item>
        <a-breadcrumb-item>Change</a-breadcrumb-item>
        <a-breadcrumb-item>Finish</a-breadcrumb-item>
      </a-breadcrumb>

  <div>

    <div class="steps-content">
      <router-view></router-view>
    </div>
    <!-- <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">
        Submit
      </a-button>
      <a-button
        v-if="current == steps.length - 1"
        type="primary"
        @click="$message.success('Change Password complete!')"
      >
        Done
      </a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
        Previous
      </a-button>
        <a-button v-if="current == 0" style="margin-left: 8px" @click="prev">
        Return
      </a-button>
    </div> -->
  </div>
      
    </a-layout-content>
    <a-layout-footer style="text-align: center">
      Personal Blog @2021.7 created by 8-621
    </a-layout-footer>
  </a-layout>
</div>

</template>
<script>
export default {
  data() {
    return {
      current: 0,
      activepath: '',
      steps: [
        {
          
          content: 'First-content',
        },
        {
          
          content: 'Second-content',
        },
        {
          
          content: 'Last-content',
        },
      ],
    };
  },
  created(){
    window.sessionStorage.setItem('activepath','/Step1')
    this.activepath = '/Step1'
  },
//   watch:{
//       activepath(newVal,oldVal){
//           if(newVal == '/Step1')
//            {
//                this.current = 0
//            }
//           else if(newVal == '/Step2')
//           {
//               this.current = 1
//               console.log('bian')
//           } 
//           else if(newVal == '/Step3')
//           {
//               this.current = 2
//           } 
//       }
//   },
  methods: {
//     next() {
//       this.current++;
//       if(this.current==0)
//       {
//           this.$router.push('/Step1')
//       }
//       else if(this.current==1)
//       {
//           this.$router.push('/Step2')
//       }
//       else if(this.current==2)
//       {
//           this.$router.push('/Step3')
//       }
//     },
//     prev() {
//       this.current--;
//        if(this.current==0)
//       {
//           this.$router.push('/Step1')
//       }
//       else if(this.current==1)
//       {
//           this.$router.push('/Step2')
//       }
//       else if(this.current==2)
//       {
//           this.$router.push('/Step3')
//       }
//     },
  },
};
</script>
<style>
#components-layout-demo-top .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  height: 250px;
  text-align: center;
  padding-top: 80px;
}

.steps-action {
  margin-top: 24px;
}
</style>
